<template>
  <div ref="print" v-if="visible">
    <a-drawer
      placement="right"
      :closable="false"
      :maskClosable="true"
      @close="onDrawerClose"
      :visible="visible"
      width="100%"
      :getContainer="false"
      :title="title"
    >
      <div id="print">
        <div v-for="(item, index) in Headerlist" :key="index + item.Id">
          <div class="Listdetails" v-for="(buttonitem, i) in item.subdata" :key="i + buttonitem.Id" ref="Listdetails">
            <div>
              <i>派工单</i>
              <span> {{ item.StaffName }}/ {{ item.DispatchDate }}-{{ item.TeamTypeName }}班</span>
            </div>
            <div>
              <i>编号</i>
              <span>{{ buttonitem.QrCode }}</span>
            </div>
            <div>
              <i>名称</i>
              <span>{{ buttonitem.MaterialIdName }}</span>
            </div>
            <div>
              <i>所属项目</i>
              <sapn> {{ buttonitem.ProName }}</sapn>
            </div>
            <div>
              <i>订单编号:</i>
              <span>{{ buttonitem.Code }}:</span>
            </div>
            <div>
              <i>订单名称:</i>
              <span>{{ buttonitem.ProductionOrderName }}:</span>
            </div>
            <div>
              <i>材质</i>
              <span>{{ buttonitem.Texture }}</span>
            </div>
            <div>
              <i>孔径</i>
              <span>{{ buttonitem.Aperture }}</span>
            </div>
            <div>
              <i>工序</i>
              <span> {{ buttonitem.SubName }}</span>
            </div>
            <div class="bottom">
              <span class="left">
                <a class="k">数量</a>
                <a class="v">{{ buttonitem.Nums }}</a>
              </span>
              <span class="right">
                <div :ref="'listQrcode' + index" class="listQrcode" id="qrcode"></div>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div
        :style="{
          position: 'fixed',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 9999,
          title: ''
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onDrawerClose">取消</a-button>
        <a-button :style="{ marginRight: '8px' }" type="primary">下载二维码</a-button>
        <a-button type="primary" @click="print">打印</a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import moment from 'moment'
export default {
  data() {
    return {
      data: [],
      QrCode: '',
      loading: false,
      visible: false,
      queryParam: {},
      selectedRowKeys: [],
      did: '',
      UserName: '',
      dateTime: '',
      Headerlist: [],
      Buttonlist: [],
      EndTime: '',
      idlist: []
    }
  },
  created() {},
  methods: {
    print() {
      const subOutputRankPrint = document.getElementById('print')
      const newstr = subOutputRankPrint.innerHTML
      document.body.innerHTML = newstr
      window.print()
      window.location.reload()
    },
    creatQrCode(qText, div) {
      var ar = new QRCode(div, {
        text: qText, // 需要转换为二维码的内容
        width: 80,
        height: 80,
        colorDark: '#000000',
        colorLight: '#ffffff'
        // correctLevel: QRCode.CorrectLevel.H
      })
      console.log(ar)
    },

    creatQrCodenew(qText, div) {
      var qrcode = new QRCode(div, {
        text: qText,
        width: 80,
        height: 80,
        colorDark: '#000000',
        colorLight: '#ffffff'
      })
    },

    getDataList() {
      this.$nextTick(() => {
        this.Headerlist.forEach((item, index) => {
          item.subdata.forEach((wuliao, i) => {
            this.creatQrCodenew(wuliao.MateralldCode, this.$refs['listQrcode' + index][i])
            console.log(this.$refs['listQrcode' + index][i])
          })
        })
      })
    },
    async openDrawer(id, title) {
      this.title = title
      this.visible = true
      console.log(id)
      await this.$http.post('/PB/PB_Location/SelectLocationID?ID=' + id, {}).then(res => {
        console.log(res)
        if (res.Success == true) {
          this.$message.success('打印成功!')
        } else {
          this.$message.error(res.Msg)
        }
        // this.Headerlist = res.Data
        // res.Data.forEach(mo => {
        //   mo.DispatchDate = mo.DispatchDate.substring(0, 10)
        // })
      })
      this.getDataList()
    },
    onDrawerClose() {
      this.visible = false
    }
  }
}
</script>

<style scoped>
b {
  display: block;
  text-align: center;
  font-size: 16px;
}
.Listdetails {
  color: #000 !important;
}
p {
  line-height: 14px;
  font-size: 12px;
  text-align: center;
}

i {
  font-weight: 600;
  font-style: normal;
  margin-right: 2px;
}

div {
  overflow: hidden;
  font-size: 12px;
}
img {
  display: block;
  width: 80px;
  margin: 0 auto;
  padding: 10px;
}

.left {
  float: left;
  width: 65%;
}
.right {
  float: right;
  width: 30%;
}
.listQrcode {
  padding: 10px;
}
.k {
  display: block;
  font-size: 12px;
  /* padding: 10px; */
  color: #000;
}
.v {
  display: block;
  font-size: 50px;
  text-align: center;
  font-weight: 600;
}
.bottom {
  margin-top: 10px;
  margin-bottom: 15px;
  border-bottom: 1px dotted #000;
}
.v {
  color: #000;
}
</style>
